<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="维护列表"
      width="90%"
      :close-on-press-escape="false"
    >
      <div class="w-[98%] p-20px">
<!--        <div class="filter-container">-->
<!--          <el-select style="width: 180px" v-model="filter.orderStatus" placeholder="处理状态" clearable>-->
<!--            <el-option label="处理中" value="处理中"></el-option>-->
<!--            <el-option label="暂停" value="暂停"></el-option>-->
<!--            <el-option label="已取消" value="已取消"></el-option>-->
<!--            <el-option label="已完成" value="已完成"></el-option>-->
<!--          </el-select>-->
<!--          <el-select style="width: 130px" v-model="filter.indexId" placeholder="合作编号" clearable>-->
<!--            <el-option v-for="item in agencyList" :key="item.id" :label="item.agencyName" :value="item.indexId"></el-option>-->
<!--          </el-select>-->

<!--          <el-input style="width: 130px;margin-left: 10px" v-model="filter.customName" placeholder="客户姓名"></el-input>-->

<!--          <el-select style="width: 130px;margin-left: 10px" v-model="filter.sex" placeholder="性别" clearable>-->
<!--            <el-option label="男" value="男"></el-option>-->
<!--            <el-option label="女" value="女"></el-option>-->
<!--          </el-select>-->

<!--          <el-select v-model="filter.trusteeshipType" required style="width: 130px;margin-left: 10px" clearable-->
<!--                     placeholder="托管类型">-->
<!--            <el-option v-for="item in getEnumBySn('cycleTypeEnum')" :label="item.label" :key="item.value"-->
<!--                       :value="item.value"></el-option>-->
<!--          </el-select>-->
<!--          <el-input style="width: 130px;margin-left: 10px" v-model="filter.platform" placeholder="处理平台"></el-input>-->
<!--          <el-input style="width: 130px;margin-left: 10px" v-model="filter.weihushoujihao" placeholder="维护手机号"></el-input>-->
<!--        </div>-->

        <div class="table-container">
          <div class="table-wrapper">
            <el-table 
              :data="tableData" 
              style="width: 100%" 
              border 
              stripe
              height="100%"
            >
              <el-table-column label="序号" width="60" align="center" fixed>
                <template #default="{ $index }">
                  {{ $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column v-for="column in columns" 
                :key="column.prop" 
                :prop="column.prop" 
                :label="column.label"
                :width="column.width" 
                :align="column.align"
                :fixed="column.fixed"
              ></el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template v-slot="scope">
                  <el-button @click="editHandle(scope.row)" size="mini" type="primary">身份信息</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="pagination-container">
            <el-pagination 
              :current-page="currentPage" 
              :page-size="pageSize" 
              :total="totalItems" 
              @current-change="currentChange"
              background 
              layout="total, prev, pager, next" 
              prev-text="上一页" 
              next-text="下一页"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
    <Modal ref="modalRef"></Modal>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getEnumBySn } from "@/api/enums";
import Modal from "@/views/tool/maintenance/modal.vue"
import request from '@/config/axios'

const dialogVisible = ref(false)
const filter = ref({
  gender: '',
  trusteeshipType: ""
});
const modalRef = ref({})

// 监听 filter 对象的变化
watch(filter, (newValue, oldValue) => {
  fetchData();
}, { deep: true });

const tableData = ref([
  {
    orderStatus: '托管',
  }
])
const agencyList = ref([])

const columns = ref([
  { prop: 'typeName', label: '业务类型', width: '100',align:'center' },
  { prop: 'handleUser', label: '处理人', width: '100',align:'center' },
  { prop: 'status', label: '处理状态', width: '100',align:'center' },
  { prop: 'agencyName', label: '合作编号', width: '100',align:'center' },
  { prop: 'customName', label: '客户姓名', width: '120',align:'center' },
  { prop: 'phoneNo', label: '转接手机号', width: '120' ,align:'center'},
  { prop: 'trusteeshipType', label: '托管类型', width: '120',align:'center' },
  { prop: 'platformType', label: '平台类型', width: '120',align:'center' },
  { prop: 'platform', label: '平台', width: '120',align:'center' },
  { prop: 'trusteeshipAmount', label: '金额', width: '120',align:'center' },
  { prop: 'handleProgress', label: '最新处理进度', width: '120',align:'center' },
  { prop: 'createDateTime', label: '最后处理时间', width: '120',align:'center' },
  { prop: 'handleMemo', label: '备注', width: '120',align:'center' }
]);

const totalItems = ref(0);
const currentPage = ref(1);
const pageSize = ref(15);
const currentItem = ref({});

const currentChange = (v) => {
  currentPage.value = v
  fetchData()
}

async function fetchData() {
  const response = await request.get({
    url: '/maintenance/list',
    params: { ...filter.value, current: currentPage.value }
  })
  let dictMap = {}
  let enumBySn = getEnumBySn('priority');
  enumBySn.forEach(item => {
    dictMap[item.value] = item.label;
  })
  tableData.value = response.records?.map(item => {
    item.typeName = dictMap[item.type]
    return item;
  })
  totalItems.value = response.total
  currentPage.value = response.current
}

const editHandle = (rowData) => {
  modalRef.value?.edit(rowData)
  currentItem.value = rowData
}

const closeDialog = () => {
  dialogVisible.value = false
}


const queryParams = ref({})
const open = (rowData) => {
  dialogVisible.value = true
  currentItem.value = rowData
  console.log('---rowData---',rowData)
  filter.value = {
    "tgDtlId": rowData.id,
  }
  fetchData()
}

onMounted(() => {
  fetchData();
});

defineExpose({
  open
})
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.table-container {
  position: relative;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

.table-wrapper {
  flex: 1;
  overflow: hidden;
  margin-bottom: 50px;
}

.pagination-container {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 0;
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #ebeef5;
}

:deep(.el-table) {
  height: 100%;
}

:deep(.el-table__body-wrapper) {
  overflow-y: auto;
}

:deep(.el-table__fixed-right) {
  height: 100% !important;
}

:deep(.el-table__fixed) {
  height: 100% !important;
}
</style>
